<script setup>
import { ref } from 'vue'
import { Delete, Edit } from '@element-plus/icons-vue'
import { artGetManageInfoService } from '@/api/article'
import { setMytime } from '@/utils/mytime'
//表格
const tableData = ref('')
//选择框变量

const chooseList = ref({
  pagenum: 1,
  pagesize: 2,
  cate_id: '',
  state: ''
})

//加载功能
const isLoading = ref(false)
const total = ref('')
const getManageInfoService = async () => {
  isLoading.value = true
  const { data } = await artGetManageInfoService(chooseList.value)
  total.value = data.total
  tableData.value = data.data
  isLoading.value = false
}
getManageInfoService()

//分页功能
const onSizeChange = () => {
  chooseList.value.pagenum = 1
  getManageInfoService()
}

const onCurrentChange = () => {
  getManageInfoService()
}

//搜索重置功能
const onSearch = () => {
  chooseList.value.pagenum = 1
  getManageInfoService()
}

const onReset = () => {
  chooseList.value.pagenum = 1
  chooseList.value.cate_id = ''
  chooseList.value.state = ''
  getManageInfoService()
}

//增加功能
const drawerSign = ref()

const addArt = () => {
  drawerSign.value.showDrawer({})
}
//编辑功能
const editArt = (row) => {
  drawerSign.value.showDrawer(row)
}

//删除功能
const deleteArt = (row) => {
  console.log(row)
}

//页数问题
const onSuccessPage = async (sign) => {
  if (sign === 'add') {
    const currentPage = Math.ceil((total.value + 1) / chooseList.value.pagesize)
    chooseList.value.pagenum = currentPage
  }
  getManageInfoService()
}
</script>
<template>
  <div class="main1">
    <page-container title="文章管理">
      <template #extra>
        <el-button type="primary" @click="addArt">添加管理</el-button>
      </template>

      <el-form inline>
        <channel-select
          v-model="chooseList.cate_id"
          width="240px"
        ></channel-select>
        <el-form-item label="文章状态:">
          <el-select
            v-model="chooseList.state"
            placeholder="请选择"
            size="small"
            style="width: 240px"
          >
            <el-option label="已发布" value="已发布" />
            <el-option label="草稿" value="草稿" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" style="width: 100%" v-loading="isLoading">
        <el-table-column label="文章标题" min-width="20%">
          <template #default="{ row }">
            <el-link type="primary" underline="never">{{ row.title }}</el-link>
          </template>
        </el-table-column>

        <el-table-column prop="cate_name" label="分类" min-width="20%" />
        <el-table-column label="发布时间" min-width="20%">
          <template #default="{ row }">
            <span>{{ setMytime(tableData.pub_date) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" min-width="20%" />
        <el-table-column label="操作" min-width="20%">
          <template #default="{ row }">
            <el-button
              type="primary"
              :icon="Edit"
              circle
              @click="editArt(row)"
            />
            <el-button
              type="danger"
              :icon="Delete"
              circle
              @click="deleteArt(row)"
            />
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="暂无数据" />
        </template>
      </el-table>
      <div class="demo-pagination-block">
        <el-pagination
          v-model:current-page="chooseList.pagenum"
          v-model:page-size="chooseList.pagesize"
          :page-sizes="[2, 5, 10, 15, 20]"
          :size="size"
          :background="true"
          layout="jumper,total, sizes, prev, pager, next"
          :total="total"
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
          style="margin: 50px 50px 30px; float: right"
        />
      </div>
    </page-container>
    <manage-edit-drawer
      ref="drawerSign"
      @success="onSuccessPage"
    ></manage-edit-drawer>
  </div>
</template>
